.login-view.gs-login-theme {
  .center-logo {
    height: 69px !important;
    display: flex;
    align-items: center;
    margin-left: -20px;
  }

  .login-main-content {
    top: auto !important;
    left: auto !important;
    bottom: 6%;
    right: 8%;
    transform: none !important;
    margin-bottom: 66px;
    color: #eff7fb;
    background: linear-gradient(180deg, rgba(10, 70, 105, 0), #01131e80, #010b16bf, #011a32c0, #03183078) !important;

    .toggle-button {
      background: url("./images/swiper/login-sprite01.png") no-repeat right center;
      background-size: auto 100%;

      &:hover {
        background: url("./images/swiper/login-sprite03.png") no-repeat right center;
        background-size: auto 100%;
      }
    }

    .toggle-button.password {
      background: url("./images/swiper/login-sprite02.png") no-repeat right center;
      background-size: auto 100%;

      &:hover {
        background: url("./images/swiper/login-sprite04.png") no-repeat right center;
        background-size: auto 100%;
      }
    }

    .title-area {
      color: #dbeffb;
    }

    .login-form {
      ::v-deep.el-input--prefix .el-input__inner {
        border: 1px solid #cedae7d4;
        background: #ebf0f99c;
        color: #022d6c;

        &:-webkit-autofill {
          box-shadow: 0 0 0 1000px #bdcfe3 inset !important;
          color: #fff !important;
          -webkit-text-fill-color: #022d6c;
          border: 1px solid #fff;
        }

        &:focus {
          border: 1px solid #fff;
          color: #1a7af0;
          background-color: #ebf0f9ad;
        }
      }

      ::v-deep.el-input__prefix {
        .el-input__icon {
          color: #022d6c;
        }
      }

      ::v-deep.el-input--prefix:hover {
        .el-input__inner {
          border: 1px solid #fff !important;
          background-color: #ebf0f9ad;
        }
      }

      .show-pwd {
        color: #143570;
      }

      .login-button {
        background-color: #1c85e9;
        border-color: #0969cf;

        &:hover {
          background-color: #3698f7;
          color: #fff;
        }

        &.is-disabled {
          background-color: #0661c9;
          color: #c4d3ee;
        }
      }

      ::v-deep {
        .verify-bar-area {
          border: 1px solid #9bc5f3;
          background: #e6ebf1a3;
          .verify-msg { color: #022d6c; }
        }

        .verify-bar-area .verify-left-bar {
          background: #c4e1cf !important;

          &.begin {
            border-color: #f4f7ff !important;
          }
        }

        .verify-bar-area .verify-move-block {
          background: #0326a5;

          &.begin {
            border-color: #f4f7ff !important;
            background: #ebf0f99c !important;

            .verify-icon.el-icon-arrow-right {
              color: #0469dd !important;
            }
          }
        }

        .el-form-item {
          .el-form-item__error {
            top: 90%;
            color: #e5ab06;
          }

          .el-input input:placeholder { /* Mozilla Firefox 4 to 18 */
            color: #20579c;
            font-size: 15px;
          }

          .el-input input::placeholder { /* Mozilla Firefox 19+ */
            color: #20579c;
            font-size: 15px;
          }
        }
      }
    }

    .mobile {
      border: 1px solid #f4f9fb52;
      color: #eff7fbc2;
      background-color: #011d3866;

      &:hover {
        color: #fff;
        background-color: #0661c9;
      }
    }
  }

  .footer-banner {
    position: absolute;
    right: 8%;
    z-index: 4;
    width: 440px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 20px;
    font-size: 16px;
    bottom: 6%;
    border-radius: 6px;
    color: #dbeeef;
    font-weight: 600;
    background: linear-gradient(180deg, #03183078, #03183036, #cdd7e100) !important;
    font-style: italic;
    text-shadow: 0 1px #01323a, 1px 0 #01323a, -1px 0 #01323a, 0 -1px #01323a;
  }
}
